<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作和CSS方法-应用jQuery操作元素的属性</title>
    <script src="./jquery1.11.3.js"></script>
    <script>
        $(function () {
            // alert($('div').attr('id'));//获取某个元素的id属性值
            // $('div').attr('title','我是title');//修改某一元素的属性值
            // $('div').attr({'title':'我是title','class':'cla','date':'2020'});//添加多个属性的值
            // $('div').attr('title',function () {
            //     return '我是用fun设置的title';//用函数设置title的值
            // });
            // $('div').attr('title',function (index,value) {
            //     return '我是用fun设置的title'+index+value;//value获得之前值  这是添加属性值
            // });
           $('div').removeAttr('title');//删除某元素指定的属性
        });
    </script>
</head>
<body>
<script>
   /*DOM操作和CSS方法
   *
    *    一.应用jQuery设置元素及内容
    *                       jquery                                 JS
    *
    *  1.获取html内容        $('#box').html()                       document.getElementById("box").innerHTML
    *  2.修改html内容        $('#box').html('<em>新的内容</em>')    document.getElementById("box").innerHTML="文本内容";
    *
    *  3.获取html文本内容    $('#box').text()                       document.getElementById("box").innerText
    *  4.获取strong文本内容  $('strong').eq(0).text()               document.getElementsByTagName("strong")[0].innerText
    *
    *  5.获得表单的内容      $('input').eq(0).val()                 document.getElementsByTagName("input")[0].value
    *  6.修改表单的内容      $('input').val('修改后的新表单内容')    document.getElementsByTagName("input")[0].value="新内容"
    *  7.设置默认选中        $('input').val(['男','小孩'])          document.getElementById("男").checked=true;
    *                                                             document.getElementById("小孩").checked=true;
    *########################################################################################################
    * 二.应用jQuery操作元素的属性
    *
    * 1.获取某个元素的属性值   $('div').attr('id')
    *    修改...............   $('div').attr('title','我是title')
    * 2.设置 某个元素多个属性的属性值
    *        $('div').attr({'title':'我是title','class':'cla','date':'2020'})
    * 3.如何通过匿名fn来设置某个元素属性值？
    *    $('div').attr('title',function (index,value) {
    *    return '我是用fun设置的title'+index+value;//value获得之前值  这是添加属性值
    *   });
    * 4.如何删除元素指定的属性?
    *   $('div').removeAttr('title')
    * 三.应用jQuery操作元素的样式
    * 四.jQuery在CSS方法应用
    */
</script>
<!--    <div id="box"></div>-->
    <div title="title0">rabbit</div>
    <div title="title1">tiger</div>
</body>
</html>